import type { EChartsOption } from 'echarts'
import { merge } from 'lodash-es'
import { ref, watch } from 'vue'
import type { CustomComponent } from '../type'

export function useChartBase({
  defaultOptions,
  config,
}: {
  defaultOptions?: EChartsOption
  config?: CustomComponent
}) {
  const _options = ref<EChartsOption>()

  /**
   * 配置赋值
   */
  watch(
    () => config,
    () => {
      _options.value = merge(
        defaultOptions,
        (config?.chartOption || {}) as EChartsOption,
      )
    },
    {
      immediate: true,
      deep: true,
    },
  )

  return {
    options: _options,
  }
}
